<template>
    <div class="cv">
        <canvas ref="canvasRef" width="450" height="450"></canvas>
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'
//获取canvas的dom节点
const canvasRef = ref<HTMLCanvasElement | null>(null);
onMounted(() => {
    const canvasEle = canvasRef.value;
    if (!canvasEle) return;
    //获取canvas上下文
    const ctx = canvasEle.getContext('2d')!;
    //坐标系移动
    ctx.translate(canvasEle.width / 2, canvasEle.height);
    //y轴反向
    ctx.scale(1, -1);

    //先画树干
    drawBranch([0, 0], 65, 20, 90);
    // 绘制竖向排列的文字
    // drawVerticalText(ctx, '竖着写的字', 160, -canvasEle.height / 3);

    const poemIndex = Math.floor(Math.random() * 10) % 7;
    const poem = poemArray[poemIndex].split('，');
    drawVerticalText(ctx, poem[0], 170, 310);
    drawVerticalText(ctx, poem[1], 140, 290);
})
const poemArray = ["横看成岭侧成峰，远近高低各不同", "水光潋滟晴方好，山色空蒙雨亦奇", "踏破铁鞋无觅处，得来全不费工夫",
    "三十功名尘与土，八千里路云和月", "墙角数枝梅，凌寒独自开", "物是人非事事休，欲语泪先流", "孤舟蓑笠翁，独钓寒江雪"
]

//coordinate起始点
//len树枝长度
//thick树枝粗细
//angle生长角度
const drawBranch = (coordinate: [number, number], len: number, thick: number, angle: number) => {
    //绘制结束条件
    if (thick < 10 && Math.random() < 0.1) return;
    const canvasEle = canvasRef.value;
    if (!canvasEle) return;
    //获取canvas上下文
    const ctx = canvasEle.getContext('2d')!;
    if (thick < 2) {
        //绘制果实
        ctx.beginPath();
        ctx.arc(...coordinate, 5, 0, 2 * Math.PI);
        ctx.fillStyle = Math.random() < 0.5 ? '#fff' : '#f40';
        ctx.fill();
        return;
    }
    //开启线段绘制
    ctx.beginPath();
    //初始起始点
    ctx.moveTo(...coordinate);

    //计算结束点
    const endCoordinate: [number, number] = [
        coordinate[0] + len * Math.cos((angle * Math.PI) / 180),
        coordinate[1] + len * Math.sin((angle * Math.PI) / 180),
    ];

    ctx.lineTo(...endCoordinate);//线段终点
    ctx.strokeStyle = '#333';//线段颜色
    ctx.lineWidth = thick;//线段粗细
    ctx.lineCap = 'round';
    ctx.stroke();//开始画

    //左分支
    drawBranch(endCoordinate, len * 0.8, thick * 0.75, angle + Math.random() * 30);
    //右分支
    drawBranch(endCoordinate, len * 0.8, thick * 0.75, angle - Math.random() * 30);
};

// 绘制竖向排列的文字
const drawVerticalText = (ctx: CanvasRenderingContext2D, text: string, x: number, startY: number) => {
    // 字体大小
    const fontSize = 20;
    // 保存当前坐标系状态
    ctx.save();

    // 恢复Y轴正向
    ctx.scale(1, -1);

    ctx.font = `${fontSize}px Arial`;
    ctx.fillStyle = 'black';

    // 绘制每个字，将每个字在不同的 y 坐标绘制，从上到下排列
    for (let i = 0; i < text.length; i++) {
        // 由于Y轴反向，y坐标要加负号
        ctx.fillText(text[i], x, -(startY - i * (fontSize + 10)));
    }
    // 恢复到之前的Y轴反向状态
    ctx.restore();
};

</script>
<style scoped>
.cv {
    background-color: cadetblue;
    border-radius: 50%;
    /* 将 canvas 外观设为圆形 */
    width: 450px;
    /* 控制 canvas 的显示宽度 */
    height: 450px;
    /* 控制 canvas 的显示高度 */
    position: fixed;
    bottom: 60px;
    right: 1px;
    z-index: -100;
}
</style>